import React from 'react'
import _ from 'underscore'
import $ from 'jquery'
import View from 'lib/View.jsx'
import Card from 'lib/components/card.jsx'
import DefaultLoadingElement from 'lib/util/defaultLoadingElement.jsx'
import TraceScope from './TraceScope.es6'
import format from 'lib/util/format'

var codeFormat = {
	html:function(str){
		var tagReg = /&lt;(\/)?\w*(\/)?&gt;/g;
		return str.replace(tagReg,function(tag){
			return '<span style="color:#E88004;font-weight:bold;">'+tag+'</span>'
		})
	},
	trace:function (str){
		var classReg = /(?!=\()[A-Z][^\(]+(?=\.)/,
			methodReg = /[^\.]*(?=\()/,
			fileNameReg = /(\().*(\))/,
			lineNumReg = /\d+(?=\))/;
		return str
			.replace(classReg,function(className){
				return '<span style="color:#E88004;font-weight:bold;">'+className+'</span>'
			})
			.replace(methodReg,function(methodName){
				return '<span style="color:red;">'+methodName+'</span>'
			})
			.replace(fileNameReg,function(fileName){
				return '<span style="color:green;">'+fileName+'</span>'
			})
			.replace(lineNumReg,function(lineNum){
				return '<span style="color:blue;">'+lineNum+'</span>'
			})
	}
}

export default class TraceView extends View{
  render(){
    return (
      <div className="float-position-absolute">
        <div className="widget-float">
          <div className="widget-title">
            <a className="close iconfont" href="#/">&#xe638;</a>
            {this.state.errortrace?(
              <h4>
                {
                  this.state.errortrace.url
                }
              </h4>
            ):null}
          </div>
          {this.state.errortrace?this.renderDetail(this.state.errortrace):this.renderLoading()}
        </div>
      </div>
    )
  }
  renderLoading(){
    return (
      <div className="widget-content">
        <DefaultLoadingElement />
      </div>
    )
  }
  renderDetail(trace){
    return (
      <div className="widget-content">
        <div className="pure-g">
          <div className="pure-u-1">
            <div className="box">
              <Card>
                <table className="text-detail">
                  <tbody>
                    <tr>
                      <th>状态码：</th>
                      <td>{trace.statusCode}</td>
                      <th>时间戳：</th>
                      <td>{format.stampToTime(trace.timestamp) + ' - ' + format.duration(trace.timestamp)}</td>
                      <th>操作系统：</th>
                      <td>{trace.osName + ' ' + trace.osVersionName}</td>
                      <th>应用版本：</th>
                      <td>{trace.appVersionName}</td>
                    </tr>
                  </tbody>
                </table>
              </Card>
            </div>
          </div>
        </div>
        {
          trace.params.custom_params?(
            <div className="pure-g">
              <div className="pure-u-1">
                <div className="box">
                  <Card title="Request Header">
                    <div className="pure-g">
                      {
                        Object.keys(trace.params.custom_params).map((key) => {
                          return (
                            <div className="pure-u-1 pure-u-lg-1-2">
                              {key+' :  '+trace.params.custom_params[key]}
                            </div>
                          )
                        })
                      }
                    </div>
                  </Card>
                </div>
              </div>
            </div>
          ):null
        }
        <div className="pure-g">
          <div className="pure-u-1 pure-u-lg-1-2">
            <div className="box">
              <Card title="Response Body">
                <div dangerouslySetInnerHTML={{__html:codeFormat.html(trace.responseBody)}}></div>
              </Card>
            </div>
          </div>
          <div className="pure-u-1 pure-u-lg-1-2">
            <div className="box">
              <Card title="Stack Trace">
                <ul className="stack-trace">
                {
                  trace.trace.map(function(t){
                  return (
                    <li
                      key={t}
                      dangerouslySetInnerHTML={{
                        __html:codeFormat.trace(t)
                      }}
                      >
                    </li>
                  )
                  })
                }
                </ul>
              </Card>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
TraceView.defaultProps = {
  Scope:TraceScope
}
